前端本地部署运行（鱼皮代码版） - 用户中心项目教程 - 编程导航教程
必备环境
1、VsCode
安装教程 只需要看到安装中文就可以了
2、Node 16.16.0
3、用户中心前端代码 链接
下载前端需要的依赖
使用 VsCode 打开前端项目
打开 终端
输入命令
npm install
注意：
执行过程中，WARN 都不是报错，不影响后面正常启动前端
安装成功后的效果
运行前端
在 终端 下输入
npm run start:dev
正常效果如图：
只要能正常打开，就成功了！（PS 第一次进入需要加载一会不用担心）
关闭直接在 终端 下输入 快捷键 Ctrl + C 之后会弹出一个是否确定的提示 输入 y 即可推出
所以为什么是这些命令？
答：因为根目录下面的一个叫 package.json 的文件夹里面都有写
{
"name": "ant-design-pro",
"version": "5.2.0",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
"analyze": "cross-env ANALYZE=1 umi build",
"build": "umi build",
"deploy": "npm run build && npm run gh-pages",
"dev": "npm run start:dev",
"gh-pages": "gh-pages -d dist",
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
}
}
前端打包
在终端下执行
npm build
执行完成之后会在项目根目录，多一个 dist 文件，里面的文件全部打包上传到服务器上就可以访问到了
部署
1、使用 宝塔 面板
2、使用原生 Nginx 部署
宝塔面板
1、安装 Nginx
2、创建前端项目
填写服务器的 IP 默认 80 端口不用写，但是如果想要使用其他端口就写成 IP:90。
也可以写域名 比如 xdsx.icu 未写端口默认 80 。
比如，你服务器的 IP 是 192.168.1.1 那么你在上面的 域名 可以写 192.168.1.1 当然这样写法其实等价于 192.168.1.1:80
3、创建之后打开项目的目录
不能删除的文件是 .user.ini 正常现象！
让后把 dist 目录的全部文件上传到服务器上的这个目录！
4、放行对应的端口 80
1）服务器端口（腾讯云演示）
2）宝塔端口
5、输入你服务器的 IP （或者你设置到上面 域名 ）进行访问
6、访问成功！！！
🤩🤩🤩
原生服务器部署
首先需要安装 Nginx 教程：https://www.code-nav.cn/post/1824822454893486081
上传工具：winscp 或者其他的能上传到服务器文件的工具都可以（当然也可以 rz 命令上传）
1、先切换到工作目录
cd ~
2、创建一个文件夹
mkdir -p project/fronted
3、查看 nginx 的配置文件的位置
4、修改配置文件
vi /usr/local/nginx/conf/nginx.conf
配置文件
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 开启之后访问速度会变快
#gzip on;
server {
listen 前端运行端口;
server_name localhost;
root 前端项目地址;
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
5、更新 nginx 配置文件
nginx -s reload
6、放行服务器端口 80
Bug
按照上述流程走完之后发现报错 2024/08/21 16:39:25 [crit] 7653#0: *830 stat() "/root/project/fronted/index.html" failed (13: Permission denied), client: 42.100.136.105, server
解决方法
修改配置文件顶部的 user 选项，然后重新启动即可 nginx -s reload
user root;
项目分区导航：⬅️ 06-初始化 | 07-前端本地部署运行（鱼皮代码版） - 用户中心项目教程 - 编程导航教程 | ➡️ 08-后端本地部署运行
💬 评论